<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <style>
      * {
        margin: 20px;
      }

      .container {
        background-color: pink;
      }

      .div1 {
        background-color: blue;
        height: 100px;
        width: 1000px;
        padding: 40px;
      }

      .div2 {
        background-color: red;
        height: 40px;
        width: 600px;
      }

      ul {
        background-color: green;
        height: 400px;
        width: 400px;
        overflow: auto;
      }

      li {
        height: 150px;
        width: 100px;
        background-color: orangered;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- 阻止默认行为 -->
      <a href="https://www.bilibili.com" @click.prevent="show">B站</a>
      <!-- 阻止事件冒泡 -->
      <div class="container" @click="stopBubble">
        <button @click.prevent="stopBubble">阻止事件冒泡</button>
      </div>
      <!-- 事件只触发一次 -->
      <button @click.once="once">事件触发一次</button>
      <!-- 使用事件的捕获方式 -->
      <div class="div1" @click.capture="showMsg(1)">
        <div class="div2" @click="showMsg(2)"></div>
      </div>

      <!-- .self只有event.target是当前操作元素时才会触发 -->
      <div class="container" @click.self="stopBubble">
        <button @click="stopBubble">阻止事件冒泡</button>
      </div>

      <!-- .passive:事件的默认行为立即执行，无需等待 -->
      <!-- 
        滚动有两种滚动:
          wheel:滚轮滚动，只要滚轮滚动，事件就会触发
          scroll:滚动条滚动触发

       -->
      <!-- <ul @scroll.passive="demo"> -->
      <ul @wheel.passive="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    /* 
     事件修饰符
      .stop:阻止默认行为
      .prevent:阻止冒泡事件
      .capture:
      .self:只有event.target是当前操作元素时才会触发
      .once:事件只触发一次
      .passive:事件的默认行为立即执行，无需等待
    */
    new Vue({
      el: "#app",
      data: {

      },
      methods: {
        // 阻止默认行为
        show(e) {
          // 阻止默认行为
          e.preventDefault();
          console.log("bilibili");
        },
        // 阻止事件冒泡
        stopBubble(e) {
          // 阻止冒泡
          // e.stopPropagation();
          // alert("事件冒泡");
          console.log(e.target);
        },
        once() {
          alert("事件触发一次");
        },
        showMsg(num) {
          console.log(num);
        },
        demo() {
          for (let index = 0; index < 10000; index++) {
            console.log(index);
          }
          console.log("#");
        }
      }
    })
  </script>

</html>